<template>
	<view>
		<button @click="onHandle(75)">点击加载75</button>
		<button @click="onHandle(99)">点击加载99</button>
		<button @click="onHandle(100)">点击加载100</button>
		<view class="circle">
			<view class='progress_box'>
				<canvas class="progress_bg" :style="{width:dataObj.circle.width+'px',height:dataObj.circle.width+'px'}"
					canvas-id="canvasProgressbg"></canvas>
				<canvas class="progress_canvas" :style="{width:dataObj.circle.width+'px',height:dataObj.circle.width+'px'}"
					canvas-id="canvasProgress"></canvas>
				<view class="progress_text">
					<text class='progress_info'
						style="font-size:{{dataObj.circle.fontStyle[0]}};color:{{dataObj.circle.fontStyle[1]}}">{{a}}%</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		inject,
		computed
	} from 'vue'
	import {} from '../../api/index.js'

	const tools = inject("$tools")
	const title = ref('顶部')

	const dataObj = reactive({
		circle: {
			width: 220, //进度条宽度，单位px
			crude: 10, //进度条厚度
			fontStyle: ["80rpx", "#000"], //进度条中间文字样式
			speed: 60, //进度条加载动画速率
			progress: 20 //进度条进度值
		},
		countTimer: null,
		count: 0
	})

	onLoad(() => {
		drawProgressbg()
		countInterval()
	})
	
	// 直接加载完
	const onHandle = (num)=>{
			dataObj.circle.progress = num
			dataObj.circle.speed = 20
		countInterval()
	}

	// computed()
	const a = computed(() => {
		return parseInt(5 * (dataObj.count - 1) / 3) >= 0 ? parseInt(5 * (dataObj.count - 1) / 3) : 0
	})
	const drawProgressbg = function() {
		// 使用 wx.createContext 获取绘图上下文 context
		// console.log("this.data.parentThis2", this.data.parentThis)
		var ctx = wx.createCanvasContext('canvasProgressbg')
		console.log("ctx", ctx)
		ctx.setLineWidth(dataObj.circle.crude) // 设置圆环的宽度
		ctx.setStrokeStyle('#FFF0D3') // 设置圆环的颜色
		ctx.setLineCap('round') // 设置圆环端点的形状
		ctx.beginPath() //开始一个新的路径
		ctx.arc(dataObj.circle.width / 2, dataObj.circle.width / 2, dataObj.circle.width / 2 - 10, 0, 2 * Math.PI,
			false)
		//设置一个原点(100,100)，半径为90的圆的路径到当前路径
		ctx.stroke() //对当前路径进行描边
		ctx.draw()
	}
	const countInterval = function() {
		// 设置倒计时 定时器，计数器count+1 ,耗时6秒绘一圈
		dataObj.countTimer = setInterval(() => {
			if (dataObj.count <= dataObj.circle.progress * 3 / 5) {
				drawCircle(dataObj.count / (60 / 2))
				let _count = dataObj.count + 1
				dataObj.count = _count
			} else {
				clearInterval(dataObj.countTimer)
			}
		}, dataObj.circle.speed)
	}
	const drawCircle = function(step) {
		var context = wx.createCanvasContext('canvasProgress')
		// 设置渐变
		var gradient = context.createLinearGradient(200, 100, 100, 200)
		gradient.addColorStop("0", "#FF973A")
		// gradient.addColorStop("0.5", "#FF6000")
		gradient.addColorStop("1.0", "#FF6000")
		context.setLineWidth(dataObj.circle.crude)
		context.setStrokeStyle(gradient)
		context.setLineCap('round')
		context.beginPath()
		// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
		context.arc(dataObj.circle.width / 2, dataObj.circle.width / 2, dataObj.circle.width / 2 - 10, -Math.PI /
			2, step * Math.PI - Math.PI / 2, false)
		context.stroke()
		context.draw()
	}
</script>

<style lang="scss" scoped>
	canvas {
		// height: auto;
		// width: auto;
	}

	.circle {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.progress_box {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid red;
	}

	.progress_bg {
		position: absolute;
	}

	/* .progress_bg{position: absolute;width:220px;height: 220px;}
	.progress_canvas{width:220px;height: 220px;}  */
	.progress_text {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.progress_info {
		font-size: 60rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
	}

	.progress_dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}
</style>